<template>
	<div class="all">
		<div style="font-size: 18px;height: 3%;color: white;">系统管理</div>
		<div class="c_all">
			<div class="c_nav">
				<ul class="c_ul" style="float: left;width: 80%;">
					<li>
						<router-link class="lia" active-class="active" to="/help">系统维护/帮助</router-link>
					</li>
					<li style="border: 2px solid #34b1e0;background-image: radial-gradient(#34b1e0, rgb(2,14,48));
					box-sizing: border-box;">
						<router-link class="lia" active-class="active" to="/permission">权限管理</router-link>
					</li>
				</ul>
				<div style="float: right;color: #34b1e0;height: 40px;font-size: 20px;margin-right: 10px;display:flex;
				justify-content: center;align-items: center;"><router-link style="color: #34b1e0;font-size: 20px;" to="/">返回首页</router-link>
				</div>
			</div>
			<div class="c_mid">
			<div class="c_low21 m_PreAlert">	
				<div class="m_line"></div>
				<div class="m_title">菜单管理</div>
				</div>
				<div class="big"> 
				<div class="boxC">
					<div style="flex:1;width: 98%;margin:10px;font-size: 18px; margin-top: 30px;"
									v-for="(item, index) in c_taizhang" :key="index">
						<div style="width: 40%;display: inline-block;text-align: right;color: #34b1e0;">
							{{item.name}}
						</div>
						<div style="width: 60%;display: inline-block;text-align: left;color: white;">
							<template>
								<a v-if="index==1" href="#">{{item.data}}</a>
								<span v-else>{{item.data}}</span>
							</template>
							
						</div>
								</div>
				</div>
				<div class="boxC">
					<div style="flex:1;width: 98%;margin:10px;font-size: 18px; margin-top: 30px;"
									v-for="(item, index) in c_taizhang1" :key="index">
						<div style="width: 40%;display: inline-block;text-align: right;color: #34b1e0;">
							{{item.name}}
						</div>
						<div style="width: 60%;display: inline-block;text-align: left;color: white;">
							<template>
								<a v-if="index==1" href="#">{{item.data}}</a>
								<span v-else>{{item.data}}</span>
							</template>
							
						</div>
								</div>
				</div>
				<div class="boxC">
					<div style="flex:1;width: 98%;margin:10px;font-size: 18px; margin-top: 30px;"
									v-for="(item, index) in c_taizhang2" :key="index">
						<div style="width: 40%;display: inline-block;text-align: right;color: #34b1e0;">
							{{item.name}}
						</div>
						<div style="width: 60%;display: inline-block;text-align: left;color: white;">
							<template>
								<a v-if="index==1" href="#">{{item.data}}</a>
								<span v-else>{{item.data}}</span>
							</template>
							
						</div>
								</div>
				</div>
				<div class="boxC">
					<div style="flex:1;width: 98%;margin:10px;font-size: 18px; margin-top: 30px;"
									v-for="(item, index) in c_taizhang3" :key="index">
						<div style="width: 40%;display: inline-block;text-align: right;color: #34b1e0;">
							{{item.name}}
						</div>
						<div style="width: 60%;display: inline-block;text-align: left;color: white;">
							<template>
								<a v-if="index==1" href="#">{{item.data}}</a>
								<span v-else>{{item.data}}</span>
							</template>
							
						</div>
								</div>
				</div>
				</div>	
					        
					</div>
			<div class="c_3all"  style="position: relative;">
				
				<div class="c_left">
			<!-- 角色管理 -->
					<div class="c_low">
						<div class="c_low1 m_PreAlert">
							<div class="m_line"></div>
							<div class="m_title">角色管理</div>
							<div class="c_low21 m_SaidAlert">
								<div class="m_tableDiv">
									<el-row class="opeate-tools" type="flex" justify="end">
						<el-button  class="z_style1" @click="displayRole=true"
						 style="margin: 20px;">添加角色</el-button>
						</el-row>
									<table class="m_table">
										<thead>
											<tr style="background-color:rgb(16,47,90);color: #34b1e0;">
												<td style="width:8%;height:30px;text-align:center;">序号</td>
												<td style="width:18%;height:30px;text-align:center;">角色名称</td>
												<td style="width:30%;height:30px;text-align:center;">描述</td>
								
												<td style="width:10%;height:30px;text-align:center;">启用</td>
												<td style="width:20%;height:30px;text-align:center;">操作</td>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item, index) in m_Gitems" :key="index"
												:class="'tr-color-' + index % 2">
												<td
													style="width:5%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.id}}</td>
												<td
													style="width:8%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.location}}</td>
												<td
													style="width:35%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.note}}</td>
												<td
													style="width:15%;height:30px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.rank}}</td>
								
												 <td style="width:20%;height:40px;text-align:center;color:rgb(56,171,187);font-weight:bold;font-size:15px">
												    <span style="display:inline-block;" @click="permission(index)">{{item.operate.history}}</span>
												                                <span style="display:inline-block;margin-left:10px" @click="SaidAlertDealWindowOpen(index)">{{item.operate.deal}}</span>
												                                <span style="display:inline-block;;margin-left:10px" @click="employDelete(index,'角色')">{{item.operate.ignore}}</span>
												                            </td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- 设备管理 -->
						<div class="c_bottom">
				<div class="m_PreAlert">
				<div class="m_line"></div>
				<div class="m_title">设备管理</div>
								<div class="m_tableDiv">
									<el-row class="opeate-tools" type="flex" justify="end">
						<el-button  class="z_style1" style="margin: 20px;" @click="displayEquip=true">添加设备</el-button>
						</el-row>
									<table class="m_table">
										<thead>
											<tr style="background-color:rgb(16,47,90);color: #34b1e0;">
												<td style="width:8%;height:30px;text-align:center;">设备编号</td>
												<td style="width:18%;height:30px;text-align:center;">设备名称</td>
												<td style="width:30%;height:30px;text-align:center;">详情</td>
								
												<td style="width:10%;height:30px;text-align:center;">设备类型</td>
												<td style="width:20%;height:30px;text-align:center;">操作</td>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item, index) in E_Gitems" :key="index"
												:class="'tr-color-' + index % 2">
												<td
													style="width:5%;height:10px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.id}}</td>
												<td
													style="width:8%;height:20px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.e_name}}</td>
												<td 
													style="width:15%;height:20px;text-align:center;color:white;font-weight:bold;font-size:15px">
													<a>{{item.description}}</a>
													</td>
													<td
													style="width:15%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.kind}}</td>
								
												 <td style="width:20%;height:40px;text-align:center;color:rgb(56,171,187);font-weight:bold;font-size:15px">
												                                <span style="display:inline-block;" @click="changeE(index)">{{item.operate.history}}</span>
												                                <span style="display:inline-block;margin-left:10px" @click="SaidAlertDealWindowOpen(index)">{{item.operate.deal}}</span>
												                                <span style="display:inline-block;;margin-left:10px" @click="employDelete(index,'设备')">{{item.operate.ignore}}</span>
												                            </td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
				</div>
				</div>
				<!-- 用户管理 -->
				<div class="c_right">
					<div class="c_low">
						<div class="c_low2">
							<div class="c_low21 m_PreAlert">
								<div class="m_line"></div>
								<div class="m_title">用户管理</div>
								<template>
				<div class="container">
					<div class="app-container">
					<div class="left">
						<el-input style="margin:10px 0"  type="text" 
						prefix-icon="el-icon-search"  v-model="searchText"
						placeholder="输入员工姓名全员搜索" />
						<!-- 树形组件 -->
						<el-tree default-expand-all  node-key="id"  @current-change="selectNode"
						:data="treeData" highlight-current ref="treeData"></el-tree>
					</div>
					<div class="right">
						<el-row class="opeate-tools" type="flex" justify="end">
						<el-button  class="z_style1" @click="displayEmploy=true">添加员工</el-button>
						</el-row>
						<!-- 表格组件 -->
						<!-- 将数据绑定到表格上 -->
						       <table class="m_table1">
										<thead>
											<tr style="background-color:rgb(16,47,90);color: #34b1e0;">
												<td style="width:15%;height:30px;text-align:center;">用户名</td>
												<td style="width:18%;height:30px;text-align:center;">职位</td>
												<td style="width:18%;height:30px;text-align:center;">工号</td>
		
												<td style="width:50%;height:30px;text-align:center;">操作</td>
											</tr>
										</thead>
										<tbody>
											<tr v-for="(item, index) in memberlist" :key="index"
												:class="'tr-color-' + index % 2">
			
												<td
													style="width:15%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.username}}</td>
												<td
													style="width:15%;height:40px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.work}}</td>
												<td
													style="width:15%;height:30px;text-align:center;color:white;font-weight:bold;font-size:15px">
													{{item.workNumber}}</td>
									
								
												 <td style="width:50%;height:40px;text-align:center;color:rgb(56,171,187);font-weight:bold;font-size:15px">
												<span style="display:inline-block;" @click="showRoleDialog=true">{{item.operate.history}}</span>
												<template>
												<el-tooltip class="item" effect="dark" content="123456" placement="top">
	
											 <el-button type="text" style="color:rgb(56,171,187);margin-left:10px;font-weight:bold;font-size:15px;">{{item.operate.deal}}</el-button>
											</el-tooltip></template>
											 <span style="display:inline-block;;margin-left:10px" @click="employCFuc(index)">{{item.operate.change}}</span>
												                                
												                                <span style="display:inline-block;;margin-left:10px" @click="employDelete(index,'用户')">{{item.operate.ignore}}</span>
												                            </td>
											</tr>
										</tbody>
									</table>
				</div>
					</div>


				</div>
								</template>
							</div>
							
						</div>
					</div>
				</div>
			</div>
			
			</div>
			<!-- 新建角色 -->
			 <el-dialog :visible.sync="displayRole" title="新增角色" 
			 class="my-info-dialog"
			 width="500px">
    <!-- 表单内容 -->
    <el-form label-width="120px" :model="roleForm" :rules="rules" ref="roleForm">
      <el-form-item label="角色名称" prop="name">
        <el-input style="width:300px" siz="mini" v-model="roleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="启用" prop="state">
        <!-- 重置表单数据 需要prop属性 -->
        <!-- 如果不需要校验 就不需要写 prop属性 -->
       <el-switch size="mini" v-model="roleForm.state" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item prop="description" label="角色描述">
        <el-input size="mini" type="textarea" style="width:300px" :rows="3"  v-model="roleForm.description">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12"  style="margin-right: 50px;">
            <el-button class="z_style1" @click="displayRole=false">确定</el-button>
            <el-button class="z_style2" @click="displayRole=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
	<!-- 新建设备 -->
	 <el-dialog :visible.sync="displayEquip" title="新增设备" 
			 class="my-info-dialog"
			 width="500px">
    <!-- 表单内容 -->
    <el-form label-width="120px" :model="equipForm" :rules="rules" ref="equipForm">
      <el-form-item label="设备名称" prop="name">
        <el-input style="width:300px" siz="mini" v-model="equipForm.name"></el-input>
      </el-form-item>
	   <el-form-item label="设备类型" prop="name">
         <el-select v-model="equipForm.region" placeholder="请选择设备类型">
      <el-option label="变压器" value="shanghai"></el-option>
      <el-option label="断路器" value="beijing"></el-option>
	  <el-option label="二级设备" value="beijing"></el-option>
    </el-select>
      </el-form-item>
      <el-form-item prop="description" label="设备描述">
        <el-input size="mini" type="textarea" style="width:300px" :rows="3"  v-model="equipForm.description">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12"  style="margin-right: 30px;">
            <el-button class="z_style1" @click="displayEquip=false">确定</el-button>
            <el-button class="z_style2" @click="displayEquip=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
	<!-- 编辑设备 -->
	 <el-dialog :visible.sync="changeEquip" title="编辑设备" 
			 class="my-info-dialog"
			 width="500px">
    <!-- 表单内容 -->
    <el-form label-width="120px" :model="equipChange"  ref="equipChange">
      <el-form-item label="设备名称" prop="name">
        <el-input style="width:300px"  v-model="equipChange.e_name"></el-input>
      </el-form-item>
	   <el-form-item label="设备类型" prop="name">
         <el-input style="width:300px" v-model="equipChange.kind"></el-input>
      </el-form-item>
      <el-form-item prop="description" label="设备描述">
        <el-input size="mini" type="textarea" style="width:300px" :rows="3"  v-model="equipChange.description">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12"  style="margin-right: 40px;">
            <el-button class="z_style1" @click="changeEquipYes()">确定</el-button>
            <el-button class="z_style2" @click="changeEquip=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
	<!-- 新建用户 -->
	 <el-dialog :visible.sync="displayEmploy" title="新建用户" 
			 class="my-info-dialog"
			 width="700px">
    <!-- 表单内容 -->
    <el-form label-width="120px" :model="empolyForm" :rules="rules" ref="empolyForm">
      <el-form-item label="用户名称" prop="name">
        <el-input style="width:500px" size="mini" v-model="empolyForm.name"></el-input>
      </el-form-item>
	  <el-form-item label="用户职位" prop="name">
        <el-select v-model="empolyForm.region" placeholder="请选择用户职位" style="width:500px">
      <el-option label="总经理" value="shanghai"></el-option>
      <el-option label="普通员工" value="beijing"></el-option>
	  <el-option label="经理" value="beijing"></el-option>
    </el-select>
      </el-form-item>
	  <el-form-item label="工号" prop="workNumber">
        <el-input style="width:500px" siz="mini" v-model="empolyForm.workNumber"></el-input>
      </el-form-item>
	  <el-form-item label="密码" prop="password">
        <el-input style="width:500px" siz="mini" 
		v-model="empolyForm.password" type="password"></el-input>
      </el-form-item>
      <el-form-item prop="description" label="用户简介">
        <el-input size="mini" type="textarea" style="width:500px" :rows="3"  v-model="empolyForm.description">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button class="z_style1" @click="displayEmploy=false">确定</el-button>
            <el-button class="z_style2" @click="displayEmploy=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
	<!-- 修改用户 -->
	 <el-dialog :visible.sync="showChange" title="修改用户" 
			 class="my-info-dialog"
			 width="500px">
    <!-- 表单内容 -->
    <el-form label-width="120px" :model="employChange"  ref="employChange">
      <el-form-item label="用户名称" prop="name">
        <el-input style="width:300px"  v-model="employChange.username"></el-input>
      </el-form-item>
	   <el-form-item label="手机号" prop="name">
         <el-input style="width:300px" v-model="employChange.mobile"></el-input>
      </el-form-item>
   <el-form-item label="职位" prop="name">
         <el-input style="width:300px" v-model="employChange.work"></el-input>
      </el-form-item>
	  <el-form-item label="密码" prop="name">
         <el-input style="width:300px" v-model="employChange.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="center">
          <el-col :span="12"  style="margin-right: 40px;">
            <el-button class="z_style1" @click="showChange=false">确定</el-button>
            <el-button class="z_style2" @click="showChange=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    </el-dialog>
	 <!-- 分配权限弹层 -->
    <el-dialog :visible.sync="showPermissionDialog" 
	class="my-info-dialog" title="分配权限">
    <!-- 放置权限数据 -->
		<el-tree
		:data="permisForm"
		highlight-current
		show-checkbox
		 @current-change="selectNode1"
		:default-expanded-keys="[1,2,3,4,5]"
		node-key="id"
		:props="defaultProps">
		</el-tree>
 <el-row type="flex" justify="center" style="margin-top: 10px;">
          <el-col :span="12" style="margin-left: 20px;">
            <el-button class="z_style1" @click="showPermissionDialog=false">确定</el-button>
            <el-button class="z_style2" @click="showPermissionDialog=false">取消</el-button>
          </el-col>
        </el-row>
</el-dialog>
	 <!-- 分配角色弹层 -->
    <el-dialog :visible.sync="showRoleDialog" 
	class="my-info-dialog" title="分配权限">
    <!-- 放置权限数据 -->
   <el-tree
  :data="rroleForm"
  show-checkbox
  :default-expanded-keys="[1,2,3,4]"
  @current-change="selectNode1"
  node-key="id"
  :props="defaultProps">
</el-tree>
 <el-row type="flex" justify="center" style="margin-top: 30px;">
          <el-col :span="12">
            <el-button class="z_style1" @click="showRoleDialog=false">确定</el-button>
            <el-button class="z_style2" @click="showRoleDialog=false">取消</el-button>
          </el-col>
        </el-row>
</el-dialog>
<!-- 删除对话框 -->
	<el-dialog :visible.sync="showDelete"  width="400px"
	class="my-info-dialog" title="删除">
   <span class="sss">是否删除</span>
  <span slot="footer" class="dialog-footer">
	<el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button class="z_style1" @click="showDelete=false">确定</el-button>
            <el-button class="z_style2" @click="showDelete=false">取消</el-button>
          </el-col>
        </el-row>
  </span>
</el-dialog>
			</div>			

</template>

<script>
	import * as d3 from 'd3';
	import websocket from '../utils/websocket'
	import { transListToTreeData } from "@/utils";
	// import * as echarts from 'echarts';
	
	export default {
		data() {
			return {
				// 用户管理搜索词
				searchText:'',
				// 添加角色对话框
				displayRole:false,
				// 添加设备对话框
				displayEquip:false,
				// 添加用户对话框
				displayEmploy:false,
				// 分配权限对话框
				showPermissionDialog:false,
				// 分配角色对话框
				showRoleDialog:false,
				// 删除对话框
				showDelete:false,
				// 修改用户对话框
				showChange:false,
				roleForm:[],
				equipChange:{},
				employChange:{},
				changeEquip:false,
				equipForm:[],
				empolyForm:[],
				permisForm: [{
          id: 1,
          label: '权限管理',
          children: [{
            id: 2,
            label: '用户管理',
          },
          {
            id: 3,
            label: '设备管理'
          },
          {
            id: 4,
            label: '菜单管理'
          }
          ,
          {
            id: 5,
            label: '角色管理'
          }
        ]}
					],
				rroleForm: [{
          id: 1,
          label: '系统角色',
          children: [{
            id: 2,
            label: '系统管理员',
          },
          {
            id: 3,
            label: '普通用户'
          },
          {
            id: 4,
            label: '超级管理员'
          }
        ]}
					],
				defaultProps: {
				children: 'children',
				label: 'label'
				},
				 rules:{
        name:[ { required: true, message: '角色名称不能为空', trigger: 'blur' },],
        description:[ { required: true, message: '角色描述不能为空', trigger: 'blur' },]
      },
				treeData: [{
				label: '系统用户',
				children: [{
					label: '管理员',
					id: 1,
					children: [{
					label: '张三',
					id: 2,
					},{
						label: '张三',
						id: 3,
					}]
				},{
					label: '普通用户',
					id: 4,
					children: [{
					label: '李四',
					id: 5,
					},
					{
					label: '李四',
					id: 6,
					},
					{
					id: 7,
					label: '李四'
					}
				]
				}]
				}],//组织数据
				memberlist:[{
					username:'张三',
					mobile:'12345',
					workNumber:'001',
					work:'总经理',
					password:'123456',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'李四',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'张三',
					mobile:'12345',
					password:'123456',
					workNumber:'001',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'张三',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'张三',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'李四',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'李四',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'李四',
					mobile:'12345',
					password:'123456',
					workNumber:'001',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'李四',
					mobile:'12345',
					password:'123456',
					workNumber:'001',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				},
				{
					username:'张三',
					mobile:'12345',
					workNumber:'001',
					password:'123456',
					work:'总经理',
					operate:{
								history:'分配角色',
								deal:'查看密码',
								change:'修改',
								ignore:'删除'
							},

				}

			],
		  m_Gitems:[
                {
                    time:'2023-07-11 11:37:21',
					id:'1',
                    location:'系统管理员',
                    note:'管理整合平台，可以操作系统所有功能',
                    rank:'已启用',
                    state:'已处理',
                    operate:{
                        history:'分配权限',
                        deal:'',
                        ignore:'删除'
                    },
                },
				{
                    time:'2023-07-11 11:37:21',
					id:'2',
                    location:'普通用户',
                    note:'管理整合平台，可以操作系统所有功能',
                    rank:'已启用',
                    state:'已处理',
                    operate:{
                        history:'分配权限',
                        deal:'',
                        ignore:'删除'
                    },
                },
				{
                    time:'2023-07-11 11:37:21',
					id:'2',
                    location:'普通用户',
                    note:'管理整合平台，可以操作系统所有功能',
                    rank:'已启用',
                    state:'已处理',
                    operate:{
                        history:'分配权限',
                        deal:'',
                        ignore:'删除'
                    },
                },
				{
                    time:'2023-07-11 11:37:21',
					id:'2',
                    location:'普通用户',
                    note:'管理整合平台，可以操作系统所有功能',
                    rank:'已启用',
                    state:'已处理',
                    operate:{
                        history:'分配权限',
                        deal:'',
                        ignore:'删除'
                    },
                },
            ],
			E_Gitems:[
				{
					id:'1',
					e_name:'1号主变',
					detail:'查看',
					kind:'主变器',
					description:'MFPT(B)-1000-63L',
					operate:{
                        history:'编辑',
                        deal:'',
                        ignore:'删除'
                    },

				},
				{
					id:'2',
					e_name:'2号主变',
					detail:'查看',
					kind:'主变器',
					description:'MFPT(B)-1000-63L',
					operate:{
                        history:'编辑',
                        deal:'',
                        ignore:'删除'
                    },

				},
				{
					id:'3',
					e_name:'1号主变',
					kind:'主变器',
					detail:'查看',
					description:'MFPT(B)-1000-63L',
					operate:{
                        history:'编辑',
                        deal:'',
                        ignore:'删除'
                    },

				},
				{
					id:'4',
					e_name:'1号主变',
					detail:'查看',
					kind:'主变器',
					description:'MFPT(B)-1000-63L',
					operate:{
                        history:'编辑',
                        deal:'',
                        ignore:'删除'
                    },

				},
				{
					id:'5',
					e_name:'1号主变',
					detail:'查看',
					kind:'主变器',
					description:'MFPT(B)-1000-63L',
					operate:{
                        history:'编辑',
                        deal:'',
                        ignore:'删除'
                    },

				}
			],
				c_taizhang: [
					{
						name: '模块名称：',
						data: '在线监测模块'
					},
					{
						name: '模块详情：',
						data: '查看模块详情'
					},
					{
						name: '模块描述：',
						data: '在线监测设备信息'
	
					}
				],
				c_taizhang1: [
					{
						name: '模块名称：',
						data: '故障诊断模块'
					},
					{
						name: '模块详情：',
						data: '查看模块详情'
					},
					{
						name: '模块描述：',
						data: '收集故障信息，诊断并提交'
	
					}
				],
				c_taizhang2: [
					{
						name: '模块名称：',
						data: '状态评估模块'
					},
					{
						name: '模块详情：',
						data: '查看模块详情'
					},
					{
						name: '模块描述：',
						data: '选择分析对象并进行状态评估'
	
					}
				],
				c_taizhang3: [
					{
						name: '模块名称：',
						data: '趋势预测模块'
					},
					{
						name: '模块详情：',
						data: '查看模块详情'
					},
					{
						name: '模块描述：',
						data: '选择数据对象预测未来的走势'
	
					}
				],
				equipIndex:0
		}
		},
		methods: {
			permission(index){
				console.log(index);
				this.showPermissionDialog=true
			},
			changeE(index){
				  console.log(index);
				  this.changeEquip=true;
				  this.equipChange=this.E_Gitems[index]
				  this.equipIndex=index
				  console.log(this.equipChange);
			},
			employCFuc(index){
				console.log(index);
				  this.showChange=true;
				  this.employChange=this.memberlist[index+1]
				  console.log(this.equipChange);
			},
			employDelete(index,t){
				console.log(index,t);
				this.showDelete=true
			},
			changeEquipYes(){
				this.E_Gitems[this.equipIndex+1]=this.equipChange
				this.changeEquip=false
			},
			selectNode (nodeObj) {
				console.log(nodeObj);
    		},
			selectNode1 (nodeObj) {
				console.log(nodeObj);
    		},
			      
		},
		created() {
			// this.getWebSocket();
		}
	}
</script>

<style lang="less" scoped>
text{
	font-family: sans-serif;
	font-size: 16px;
	/* color:red; */
}
a {
	color: white;
	text-decoration: none;
}
.lia {
	transform: skew(-50deg, 0);
}


.all {
	background-color: rgb(2, 14, 48);
	width: 1920px;
	height: 1080px;
	padding: 10px;
	position: relative;
}

.m_tableDiv {
	position: absolute;
	width: 100%;
	/* height:100%; */
	/* background-color: antiquewhite; */

}

a:hover{   
            color: #38ABBB;
            
		}
.m_table {
	width: 97%;
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	/* 陈旭加的 */
	position: absolute;
	left:1.5%;
	/* 陈旭加的 */
}
.m_table1 {
	width: 100%;
	margin: 10px;
	
	
}

 ::v-deep .my-info-dialog .el-dialog__header {
    background-color: #071F49 !important;
	.el-dialog__title{
		color: white;
		font-size: 20px;
	}
	
} 
 ::v-deep .my-info-dialog .el-dialog__body {
    background-color: #071F49 !important;
	.el-form-item__label{
		color: white;
		font-size: 18px;
	}
	.sss{
		color: white;
		font-size: 20px;
	}
	.el-tree{
		background-color: #071F49 !important;
		color: white;
	}
		.el-tree-node__content{
	    height: 50px;
		&:hover{
		background-color:#0A2754 !important;
	}  
}
		.el-tree-node__label{
	font-size: 20px !important;
}
	
} 
 ::v-deep .my-info-dialog .el-dialog__footer{
		background-color: #071F49 !important;
	}
 ::v-deep .el-message-box{
		background-color: #04C9BE !important;
	}
.tr-color-0 {
	background-color: rgb(8, 34, 76);
}

.tr-color-1 {
	background-color: rgb(10, 39, 84);
}

.c_all {
	box-sizing: border-box;
	border: 2px solid #34b1e0;
	width: 100%;
	height: 96%;
}

.c_nav {
	width: 100%;
	height: 3%;
	/* background-color: rgb(7,31,73); */
}


.c_3all {
	width: 100%;
	height: 70%;
	display: flex;
	gap: 10px;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
}

.c_bottom{
	background-color: rgb(7, 31, 73);
	width: 100%;
	height: 50%;
	display: flex;
	gap: 10px;
	// margin: 10px;
	box-sizing: border-box;
}

.c_left,
.c_right {
	flex: 1;
	display: flex;
	gap: 10px;
	flex-direction: column;
}


.c_mid {
	display: left;
	gap: 10px;
	height: 23%;
	// background-color: rgb(7, 31, 73);
	margin: 10px 10px 10px 10px;
}
.m_tableDiv {
	position: absolute;
	width: 100%;
	/* height:100%; */
	/* background-color: antiquewhite; */

}

.c_low {
	flex:7;
	display: flex;
	gap: 10px;
	height: 40% !important;
	
}
.c_bottom .m_PreAlert{
	// height: 50% !important;
	width: 100%;
}

.c_top1,
.c_low1 {
	flex: 1;
	background-color: rgb(7, 31, 73);
	position: relative;
}

.z_style1 {
	/* background-color: #1B92F9; */
	opacity: 0.8;
	background-color:#126D9C;
	border-radius: 5px;
	color: #fff;
	border-width:1px;
	border-color:#34b1e0;
	
	/* 深色 */
}
.z_style2 {
	/* 浅色 */
	background-color: #71AED9; 
	/* color: aliceblue; */
	height: 40px;
	border-color:#34b1e0;
	border-width: 1px;
	margin-left: 30px !important;
	border-radius: 5px;
	
}

.c_low2 {
	flex: 2;
	/* background-color: bisque; */
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c_low21 {
	flex: 1;
	background-color: bisque;
}

.m_PreAlert,
.m_SaidAlert {
	text-align: left;
	font-weight: bold;
	position: relative;
	background-color: rgb(7, 31, 73);
}

.m_line {
	position: absolute;
	height: 18px;
	width: 4px;
	background-color: #34b1e0;
	top: 10px;
	left: 10px;
	float: left;
}

.m_title {
	float: right;
	position: absolute;
	color: #34b1e0;
	margin-bottom: 5px;
	font-weight: bold;
	left: 25px;
	top: 8px;
	width: 100px;
	height: 20px;
}

.m_tableDiv {
	position: absolute;
	width: 100%;
	/* height:100%; */
	/* background-color: antiquewhite; */

}

.c_ul {
	margin: 2px 0;
	padding: 0;
	display: flex;
	width: 99%;
	height: 100%;
	margin-left: 1%;
}

.c_ul li {
	border: 1px solid #34b1e0;
	color: white;
	width: 10%;
	height: 100%;
	display: flex;
	list-style: none;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	transform: skew(50deg, 0);
}

.c.mid1{
	width: 80%;
	height: 60%;
}
.c_mid11 {
		// display: flex;
	gap: 5px;
	align-items: center;
	flex-direction: column;
	top: 40px;
	height: 80%;
}
.boxC{
	
	float: left;
	width: 24%;
	height: 80%;
	margin:40px 8px 15px 8px;
	gap: 5px;
	font-size: 14px;
	background-color: rgb(7, 31, 73);
	// display: inline-block;
}
.big{
	// background: #000;
	width:100%;
	height: 100%;
}


#c_tu {
	width: 100%;
	height: 100%;
}

#z_circlediv3,
#z_circlediv4 {
	height: 50%;
	width: 100%;
}

.container{
	margin: 40px 20px 20px 20px;
	// background-color: #0B3D6E;
	height: 90%;
}
.app-container {
  display: flex;
  .left {
    width: 200px;
	height: 100%;
    padding: 20px 15px 10px 15px;
    border-right: 1px solid #eaeef4;
	::v-deep .el-tree-node__content{
	&:hover{
		background-color: #071F49 !important;
	}
}

	::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content  {
    // 设置颜色
    background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色 
    color: #409eff; // 节点的字体颜色
    font-weight: bold; // 字体加粗
  }

  }
   

  ::v-deep .left .el-input__inner {
  background-color: #0A2754 !important; 
  color: white !important;
  font-size: 15px;
}
::v-deep .my-info-dialog  .el-dialog__body .el-form-item__content .el-input .el-input__inner {
  background-color: #0A2754 !important; 
  color: white !important;
  font-size: 15px;
}
::v-deep .el-tree{
  background-color: #0A2754 !important;
  color: white;  
}
::v-deep .el-tree-node__content{
	    height: 50px;
}
::v-deep .el-tree-node__label{
	font-size: 20px !important;
}

	
	::v-deep .el-tree-node .is-expanded .is-current .is-focusable {
    // 设置颜色
    background-color: rgba(135, 206, 235, 0.2); // 透明度为0.2的skyblue，作者比较喜欢的颜色 
    color: #409eff; // 节点的字体颜色
    font-weight: bold; // 字体加粗
  }
  .right {
    flex: 1;
    // padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .username {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

::-webkit-scrollbar {height: 0;width: 0;color: transparent;}
</style>
